<!DOCTYPE html>
<html>
<head>
  <title>Image Gallery</title>
  <style>
    #imageGallery{
    	height:350px;
    	margin-left: 30%;
    }
    .image {
      width: 300px;
      height: 300px;
      margin: 10px;
      border: 1px solid #ccc;
      display: inline-block;
    }
  </style>
</head>
<body>
  	<div id="imageGallery"></div>
  	<div style="display:none">
  	<#list rows as row>
  		<div id="xh">${row.xh}</div>
  	</#list>
  	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
	<script>
    $(function () {
    	  console.log("token:",parent.getAppToken().token);
    	  var imageGallery = $('#imageGallery');
    	  
		  var xh = $("#xh").text();
		  $.ajax({
			    type: "GET",
			    url: "/api/carinfo/vehqrcode/"+xh,
			    headers: {
			        token: parent.getAppToken().token
			    },
			    success: function(result) {
			      console.log(result);
		    	  var img = $('<img />').attr('src', "data:image/*;base64,"+result).addClass('image');
				  imageGallery.append(img);
			    }
			});
    });
</script>
</body>
</html>